<section class="section" id="personal_project">
    <h2 class="title-thin text-muted">个人作品</h2>
    <div class="pf-wrap">
        <div class="pf-grid">

        <div class="pf-grid-sizer"></div><!-- used for sizing -->

            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/ibms.jpg' | prepend: site.baseurl }}" alt="">
                    </figure>
                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">s3系统</h2>
                                <p>工厂生产智能管理系统</p>
                                <a href="#pf-popup-1" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pf-popup-1" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/ibms.jpg' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">s3系统</h2>
                            <p class="text-muted"><strong>工厂生产智能管理系统</strong></p>
                            <dl class="dl-horizontal">
                                <dt>Demo展示地址:</dt>
                                <dd><a href="http://s3.voriastech.com">Demo</a></dd>
                            </dl>
                            <p>系统包含库存，采购，财务，数据分析，设备员工实时监控等主要功能。</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div><!-- .pf-grid-item -->
            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/ysj.jpg' | prepend: site.baseurl }}" alt="">
                    </figure>
                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">云尚景</h2>
                                <p>景观美文分享平台，您的景观个人媒体</p>
                                <a href="#pf-popup-2" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pf-popup-2" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/ysj.jpg' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">云尚景</h2>
                            <p class="text-muted"><strong>景观美文分享平台，您的景观个人媒体</strong></p>
                            <dl class="dl-horizontal">
                                <dt>Demo展示地址:</dt>
                                <dd><a href="http://ewangland.cn/">Demo</a></dd>
                            </dl>
                            <p>分享景观美文，发布精彩活动，注册您专属的个人媒体平台。</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div><!-- .pf-grid-item -->
            <div class="pf-grid-item design">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/prj-02.jpg' | prepend: site.baseurl }}" alt="">
                    </figure>
                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">奕齐金融</h2>
                                <p>包含新闻媒体，聊天学习，视频直播，开户交易等金融类APP</p>
                                <a href="#pf-popup-3" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pf-popup-3" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/prj-02.jpg' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">奕齐金融</h2>
                            <p class="text-muted"><strong>包含新闻媒体，聊天学习，视频直播，开户交易等金融类APP</strong></p>
                            <dl class="dl-horizontal">
                                <dt>ios APP下载地址:</dt>
                                <dd><img src="/resume.io/styles/img/ew.png"/></dd>
                            </dl>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div><!-- .pf-grid-item -->

            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/ai.jpg' | prepend: site.baseurl }}" alt="">
                    </figure>

                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">金团队</h2>
                                <p>包含聊天，朋友圈等社交类app</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- .pf-grid-item -->
        </div>
    </div>
</section><!-- .section -->